<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>

    <script src="../lib/react.js"></script>
    <script src="../lib/react-dom.js"></script>
    <script src="../lib/babel.js"></script>

    <script type="text/babel">
    /* this 的四种绑定规则 
        1.默认绑定 独立执行 foo()
        2.隐式绑定  被一个对象执行  obj.foo() -> obj
        3.显式绑定 call/apply/bind  foo.call("aaa") ->String("aaa")
        4.new绑定： new Foo() -> 创建一个新对象，并且赋值给this
    */
    // 类组件和函数式组件
        const obj = {
            foo: function(){
                console.log("foo:",this)
            }
        }

        // obj.foo()
        const config = {
            onClick:obj.foo
        }
        const click = config.onClick
        click()
    class App extends React.Component {
        // 组件数据
        constructor(){
            super()
            this.state={
                message:"hello world",
                counter:100
            }

            // 对需要绑定的方法，提前绑定好this
            this.btn1Click = this.btn1Click.bind(this)
        }
        // 组件方法 (实例方法)
         btn1Click() {
            console.log("btnClick",this);
            this.setState({
                counter:this.state.counter+1
            })
        }
         btn2Click = ()=> {
            console.log("btnClick2",this);
            this.setState({
                counter:1000
            })
        }
         btn3Click = ()=> {
            console.log("btnClick3",this);
            this.setState({
                counter:99
            })
        }
        // 渲染内容  render方法
        render(){
            const {message,counter } = this.state
            
            return (
                <div>
                    <h2>{counter}</h2>
                    {/* this绑定方式一: bind绑定 */}

                    <button onClick={this.btn1Click}>按钮1</button>
                    {/* this绑定方式二: es6 classfields */}
                    <button onClick={this.btn2Click}>按钮2</button>
                    {/* this绑定方式三: 直接传入一个箭头函数(重要) */}
                    <button onClick={()=> console.log("btn3")}>按钮3</button>
                    <button onClick={()=> this.btn3Click()}>按钮3</button>
                </div>
            )
        }
    }

    // 将组件渲染到界面上
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    root.render(<App/>)
    </script>
</body>
</html>